<template>
  <div class="toggle-tag">
    <van-cell :title="showTitle">
      <div slot="label" class="tag">
        <slot name="before" />
        <template v-if="radio">
          <van-tag v-for="item in tagList" :key="item.id" :class="tagData === item.name ? 'active' : ''" @click="changeTag(item, '职业类型')" plain round size="large">{{ item.name }}</van-tag>
        </template>
        <template v-else>
          <van-tag v-for="item in tagList" :key="item.id" :class="tagData.find(key => key === item.name) ? 'active' : ''" plain round size="large" @click="toggleTag(item)">{{ item.name }}</van-tag>
        </template>
        <slot name="after" />
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'ToggleTag',
  components: {},
  props: {
    tagList: { type: Array, required: true },
    tagData: { type: [Array, String], required: true },
    showTitle: { type: String, default: '' },
    radio: { type: Boolean, default: false }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    toggleTag (item) {
      const index = this.tagData.findIndex(key => key === item.name)
      index === -1 ? this.$emit('pushTag', item, this.showTitle) : this.$emit('spliceTag', index, 1, this.showTitle)
    },
    changeTag (item) {
      this.$emit('change', item, this.showTitle)
    }
  }
}
</script>

<style scoped lang="less">
.toggle-tag {
  .tag {
    .van-tag {
      margin: 10px;
    }
    .active {
      color: #3296fa;
    }
  }
}
</style>
